<script lang="ts" setup>
import { ENavigation01IconType } from '@/api/designer/model'
import { JumpConsultMethod, JumpType, type Navigation01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore, useInstStore } from '@/stores'
import { computed, type CSSProperties } from 'vue'
import './RenderNavigation01.less'

defineOptions({
  name: 'RenderNavigation01',
})
const props = defineProps<{
  render: Navigation01ComponentMeta
}>()
const instStore = useInstStore()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
const navStyle = computed<CSSProperties>(() => {
  const style: CSSProperties = {}
  if (platform.value === 'mobile') {
    const itemsCount = props.render.config.items!.length
    const lineCount = props.render.config.style
    const lineSplit = itemsCount > lineCount ? lineCount : itemsCount
    style.width = `${100 / lineSplit}%`
  }
  return style
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="[prefix('navs'), prefix(`navs-${render.config.items!.length}`)]">
      <!-- item for loop -->
      <div v-for="item of render.config.items" :key="item.id" :style="navStyle" :class="prefix('nav-wrap')">
        <!-- 无链接 -->
        <div v-if="(item.jumpType as any) === JumpType.None" :class="prefix('nav')">
          <img
            v-if="render.config.iconType === ENavigation01IconType.图片图标" draggable="false" :src="item.icon"
            :width="48" :height="48" :class="prefix('nav-image')"
          >
          <div v-else-if="render.config.iconType === ENavigation01IconType.矢量图标" :class="prefix('nav-icon-wrap')" :style="{ borderColor: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }">
            <div
              class="iconfont"
              :class="[prefix('nav-icon'), item.icon]" :style="{ color: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
            />
          </div>
          <div :class="prefix('nav-text')">
            {{ item.title }}
          </div>
        </div>
        <!-- 非咨询 -->
        <a v-else-if="(item.jumpType as any) !== JumpType.Consult" :class="prefix('nav')" target="_blank" :href="item.jumpUrl">
          <img
            v-if="render.config.iconType === ENavigation01IconType.图片图标" draggable="false" :src="item.icon"
            :width="48" :height="48" :class="prefix('nav-image')"
          >
          <div v-else-if="render.config.iconType === ENavigation01IconType.矢量图标" :class="prefix('nav-icon-wrap')">
            <div
              class="iconfont"
              :class="[prefix('nav-icon'), item.icon]" :style="{ color: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
            />
          </div>
          <div :class="prefix('nav-text')">{{ item.title }}</div>
        </a>
        <!-- 咨询(JumpType.Consult)类型处理 -->
        <!-- 具体咨询跳转处理逻辑详见`JumpConsultMethod`上方注释 -->
        <!-- item.jumpUrl是经过处理的, 格式：`[method, content].join(',')` -->
        <div v-else-if="Number(item.jumpUrl?.split(',')[0]) === JumpConsultMethod.MeiQia" :class="[prefix('nav'), prefix('designer-meiqia')]">
          <img
            v-if="render.config.iconType === ENavigation01IconType.图片图标" draggable="false" :src="item.icon"
            :width="48" :height="48" :class="prefix('nav-image')"
          >
          <div v-else-if="render.config.iconType === ENavigation01IconType.矢量图标" :class="prefix('nav-icon-wrap')">
            <div
              class="iconfont"
              :class="[prefix('nav-icon'), item.icon]" :style="{ color: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
            />
          </div>
          <div :class="prefix('nav-text')">
            {{ item.title }}
          </div>
        </div>
        <!-- 电话 -->
        <a v-else-if="Number(item.jumpUrl?.split(',')[0]) === JumpConsultMethod.DianHua" :class="prefix('nav')" :href="`tel:${item.jumpUrl?.split(',')[1]}`">
          <img
            v-if="render.config.iconType === ENavigation01IconType.图片图标" draggable="false" :src="item.icon"
            :width="48" :height="48" :class="prefix('nav-image')"
          >
          <div v-else-if="render.config.iconType === ENavigation01IconType.矢量图标" :class="prefix('nav-icon-wrap')">
            <div
              class="iconfont"
              :class="[prefix('nav-icon'), item.icon]" :style="{ color: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
            />
          </div>
          <div :class="prefix('nav-text')">{{ item.title }}</div>
        </a>
        <!-- 其他 -->
        <a v-else :class="prefix('nav')" target="_blank" :href="item.jumpUrl?.split(',')[1]">
          <img
            v-if="render.config.iconType === ENavigation01IconType.图片图标" draggable="false" :src="item.icon"
            :width="48" :height="48" :class="prefix('nav-image')"
          >
          <div v-else-if="render.config.iconType === ENavigation01IconType.矢量图标" :class="prefix('nav-icon-wrap')">
            <div
              class="iconfont"
              :class="[prefix('nav-icon'), item.icon]" :style="{ color: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
            />
          </div>
          <div :class="prefix('nav-text')">{{ item.title }}</div>
        </a>
      </div>
    </div>
  </div>
</template>
